<template>
  <div class="wrapper-root">
    <div class="wrapper-header">
      <div class="wrapper-title">
        <el-icon><Warning /></el-icon>
        <span>调速偏差情况记录</span>
      </div>
      <div class="wrapper-command">
        <el-radio-group v-model="viewSelection" size="small">
          <el-radio-button value="RecordView">
            <span class="item-inline">
              <el-icon><CirclePlus /></el-icon>
              <span>记录</span>
            </span>
          </el-radio-button>
          <el-radio-button value="QueryView">
            <span class="item-inline">
              <el-icon><Search /></el-icon>
              <span>检索</span>
            </span>
          </el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <div class="wrapper-view">
      <transition name="el-fade-in" mode="out-in">
        <RecordView v-if="viewSelection == 'RecordView'" />
        <QueryView v-else-if="viewSelection == 'QueryView'" />
      </transition>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import RecordView from "./RecordView.vue";
import QueryView from "./QueryView.vue";

const viewSelection = ref("RecordView");
</script>

<style scoped>
.wrapper-root {
  padding: 24px;
  display: flex;
  flex-direction: column;
  color: var(--el-text-color-regular);
}
.wrapper-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1em;
}
.wrapper-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-weight: bold;
  font-size: 1.25em;
}
.wrapper-title > *:not(:last-child) {
  /* margin-right: 8px; */
  margin-right: 0.25em;
}
.wrapper-command {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.wrapper-command > *:not(:first-child) {
  /* margin-left: 8px; */
  margin-left: 0.25em;
}
.wrapper-view {
  padding: 1em;
}
.item-inline {
  display: flex;
  align-items: center;
  justify-content: center;
}

.item-inline > *:not(:last-child) {
  margin-right: 0.25em;
}
</style>
